/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-04-13 20:57:29
 * @LastEditTime: 2023-11-02 10:06:00
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Button,
  Flex,
  Image,
  Text,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import { ModelTraining } from '.';
import Status, { STATUS_MAP } from './ModelStatus';

import trainService from '@/api/train.service';
const ModelDetail = ({ detail }: { detail: ModelTraining | null }) => {
  const { t } = useTranslation();
  const bg = useColorModeValue('base.950', 'base.850');

  const toast = useToast();
  if (!detail) {
    return null;
  }
  const handleUseModel = () => {
    trainService.useModel({ modelId: detail.id }).then(({ code }) => {
      if (code === 200) {
        toast({
          position: 'top',
          description: '模型已添加到模型选择列表，请到绘画页面切换使用模型！',
          status: 'success',
          duration: 5000,
          isClosable: true,
        });
      }
    });
  };
  const _status = STATUS_MAP[detail.status as keyof typeof STATUS_MAP];
  return (
    <Flex
      w="full"
      pb="4"
      gap={2}
      direction="column"
      alignItems="center"
      justifyContent="center"
    >
      <Flex w="full" p={2} bg={bg} shadow="md" rounded="lg" overflow="hidden">
        <Box w={1 / 3} minH="250px">
          <Image
            w="full"
            objectFit="contain"
            h="full"
            src={detail.imgDtoList[0]?.imgPath}
            loading="lazy"
          />
        </Box>

        <Flex
          w={2 / 3}
          p={4}
          flexDirection="column"
          justify="space-between"
          position="relative"
        >
          <Box position="absolute" right={-0.5} top={-1}>
            <Status status={_status} remainTime={detail.remainTime} />
          </Box>
          <Box>
            <Text fontSize="2xl" fontWeight="bold" color="base.100">
              {detail.name}
            </Text>

            <Text mt={2} fontSize="sm" color="base.300">
              {detail.modelDesc}
            </Text>
          </Box>
          <Flex alignItems="center" justify="end">
            {_status === 'done' && Number(detail.type) === 1 && (
              <Button
                py={1}
                fontSize="xs"
                fontWeight="bold"
                px={8}
                backgroundColor="base.850"
                color="base.300"
                size="sm"
                _hover={{
                  transform: 'translateY(-2px)',
                  boxShadow: 'lg',
                }}
                onClick={handleUseModel}
              >
                {t('training.useModel')}
              </Button>
            )}
          </Flex>
        </Flex>
      </Flex>
      <Box w="full" mt={2}>
        <Text fontWeight="bold" fontSize="xl">
          训练素材:
        </Text>
        <Flex gap={3} py={3} px={1.5} flexWrap="wrap">
          {detail.imgDtoList.map((file: any) => (
            <Image
              key={file.id}
              objectFit="cover"
              borderRadius="md"
              alt=""
              width="7.5rem"
              height="7.5rem"
              src={file.imgPath}
            />
          ))}
        </Flex>
      </Box>
    </Flex>
  );
};

export default ModelDetail;
